<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mvvm</title>
  </head>
  <body>
    <!-- 
      mvvm框架，数据响应式框架，视图更新会影响到数据，数据的更新会影响到视图
    -->
    <div>
      <h3 id="title"></h3>
      <input type="text" id="username" />
    </div>

    <script>
      let data = {
        username: 'admin'
      }

      showTitle()

      function showTitle() {
        document.getElementById('title').textContent = data.username
      }

      document
        .getElementById('username')
        .addEventListener('input', function () {
          data.username = this.value
          showTitle()
          console.log(data.username)
        })
    </script>
  </body>
</html>
